<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="/amigooo/assets/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/amigooo/assets/css/start/start.css" />
<style type="text/css">
	.custom-list {
		border: 0px !important;
		border-bottom: 1px solid #e5e5e5 !important;
		background-color: #fff !important;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
	}
	
	.custom-list:HOVER {
		background-color: #f6f6f6 !important;
	}
</style>
<title>Amigooo!</title>
</head>
<body style="height: 100% !important;">
	<div class="row-fluid">
		<div class="navbar navbar-static navbar-custom">
            <div class="navbar-inner">
				<div class="container" style="width: auto;">
					<a class="brand" href="/amigooo/home/start" style="margin-top: 5px !important;margin-left: 22px !important;height: 30px !important;padding: 0px !important;">
						<img alt="Amigooo" style="height: 30px !important;" src="/amigooo/assets/img/logo_small_w.png">
						Amigooo!
					</a>
					<ul class="nav pull-right" role="navigation">
						<li class="dropdown">
							<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" style="color:white !important;text-shadow: 0 1px 0 #777777 !important;">
								<img id="user-picture" alt="${userSession.user.email}" src="" style="margin-top: -3px !important;border:1px solid black;width: 25px !important;height: 25px !important;"/>
								${userSession.user.name}<b class="caret"></b>
							</a>
							<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
								<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><i class="icon-wrench"></i> Alterar conta</a></li>
								<li class="divider"></li>
								<li role="presentation"><a role="menuitem" tabindex="-1" href="/amigooo/login/logout"><i class="icon-off"></i> Sair</a></li>
							</ul>
						</li>
					</ul>
				</div>
            </div>
            <div class="header">
            	<a class="title-company" href="/amigooo/home/start" title="${userSession.user.establishment.company}">${userSession.user.establishment.company}</a>
            </div>
            <div class="company-logo">
            	<a href="/amigooo/home/start" title="${userSession.user.establishment.company}">
            		<img id="companyLogo" alt="${userSession.user.establishment.email}" src="" class="img-rounded" />
            	</a>
            </div>
        </div>
		<div class="fluid12" style="height: 100% !important;">
			<div class="row-fluid" style="height: 100% !important;">
					<div class="span2" style="height: 100% !important;">
						<div class="custom-container" style="border: 0px !important;height: 100% !important;">
							<div class="accordion" id="accordion2" style="height: 100% !important;max-height: 400px !important;">
							  <div class="accordion-group" style="height: 100% !important;">
							    <div class="accordion-heading">
							      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne" style="background-color: #f5f5f5 !important;">
							      	<i class="icon-user"></i> Adicionar cliente <span class="badge badge-warning badge-access-user" style="float: right !important;">0</span>
							      </a>
							    </div>
							    <div id="collapseOne" class="accordion-body collapse in" style="z-index: 1 !important;">
							      	<c:choose>
							      		<c:when test="${access != null}">
								      		<c:forEach items="${access}" var="accessUser">
											   <div class="accordion-inner" style="padding: 0px; z-index: 1 !important;">
								      				<table class="user-popover access-user-table" id="${accessUser.user.email}" mail="${accessUser.user.email}" data-toggle="popover" data-placement="right" data-original-title="${accessUser.user.name}" style="width: 100% !important;height: 100% !important;z-index: 2 !important;">
								      					<tr>
								      						<td style="padding-top: 10px !important;padding-bottom: 10px !important;padding-left: 5px !important;width: 60px;background-color: #f5f5f5;">
								      							<img alt="${accessUser.user.email}" class="user-gravatar img-polaroid" style="max-height: 45px !important;max-width: 45px !important;"/>
								      						</td>
								      						<td>
								      							<table>
								      								<tr>
								      									<td colspan="2" style="padding-left: 10px;">
											      							<span>${accessUser.user.name}</span>
								      									</td>
								      								</tr>
								      								<tr>
							      										<td style="padding-left: 10px; padding-top: 0px;">
								      										<button class="btn btn-small btn-danger deny-user" type="button" style="margin-top: 0px;" id="deny-request_${accessUser.id}"><i class="icon-remove"></i></button>
																			<button class="btn btn-small btn-success accept-user" type="button" style="margin-top: 0px;" id="acc-request_${accessUser.id}"><i class="icon-ok"></i></button>
								      									</td>
								      								</tr>
								      							</table>
								      						</td>
								      					</tr>
								      				</table>
											      </div>
									      </c:forEach>
							      		</c:when>
							      		<c:when test="${access == null}">
							      			<div class="accordion-inner">
							      				<h5>Nenhum acesso requisitado</h5>
							      			</div>
							      		</c:when>
							      	</c:choose>
							    </div>
							  </div>
							  <div class="accordion-group">
							    <div class="accordion-heading">
							      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo" style="background-color: #f5f5f5 !important;">
							        <i class="icon-retweet"></i> Clientes ativos   <span class="badge badge-info badge-active-user" style="float: right !important;">0</span>
							      </a>
							    </div>
							    <div id="collapseTwo" class="accordion-body collapse">
							  		<c:choose>
							      		<c:when test="${active != null}">
								      		<c:forEach items="${active}" var="activeUser">
											      <div class="accordion-inner" style="padding: 0px;">
								      				<table class="user-popover active-user-table" id="${activeUser.user.email}" mail="${activeUser.user.email}" data-toggle="popover" data-placement="right" data-original-title="${activeUser.user.name}" style="width: 100% !important;height: 100% !important;">
								      					<tr>
								      						<td style="padding-top: 10px !important;padding-bottom: 10px !important;padding-left: 5px !important;width: 60px;background-color: #f5f5f5;">
								      							<img alt="${activeUser.user.email}" class="user-gravatar img-polaroid" style="max-height: 45px !important;max-width: 45px !important;"/>
								      						</td>
								      						<td>
								      							<table>
								      								<tr>
								      									<td colspan="2" style="padding-left: 10px;">
											      							<span>${activeUser.user.name}</span>
								      									</td>
								      								</tr>
								      								<tr>
							      										<td style="padding-left: 10px; padding-top: 0px;">
								      										<button class="btn btn-mini btn-warning deny-user" type="button" style="margin-top: 0px;" id="deny-request_${activeUser.id}"><i class="icon-share-alt"></i>Remover</button>
								      									</td>
								      								</tr>
								      							</table>
								      						</td>
								      					</tr>
								      				</table>
											      </div>
										      </c:forEach>
							      		</c:when>
							      		<c:when test="${active == null}">
						      				<div class="accordion-inner">
							      				<h5>Nenhum cliente acessando</h5>
							      			</div>
							      		</c:when>
						      		</c:choose>
							    </div>
							  </div>
							</div>
						</div>
					</div>
					<div class="span10">
						<fieldset style="margin-top: 20px;">
							<legend>Pedidos</legend>
							<div class="row-fuild">
								<div class="span12" style="margin-left: 0px;margin-top: 0px;">
									<c:choose>
							      		<c:when test="${orders != null}">
											<c:forEach items="${orders}" var="listOrders">
													<div class="alert alert-info custom-list">
														<div style="width: 100%;height: 100%;">
															<table>
																<tr>
																	<td style="padding-right: 5px;border-right: 1px solid #e5e5e5;width: 100px !important;">
																		<c:if test="${listOrders.item.type == 1}">
																			<img alt="Bebida" src="/amigooo/assets/img/drink.png" style="width: 80px; height: 80px;">
																		</c:if>
																		<c:if test="${listOrders.item.type == 2}">
																			<img alt="Bebida" src="/amigooo/assets/img/meal.png" style="width: 80px; height: 80px;">
																		</c:if>
																		<c:if test="${listOrders.item.type == 3}">
																			<img alt="Bebida" src="/amigooo/assets/img/snack.png" style="width: 80px; height: 80px;">
																		</c:if>
																		<c:if test="${listOrders.item.type == 4}">
																			<img alt="Bebida" src="/amigooo/assets/img/special.png" style="width: 80px; height: 80px;">
																		</c:if>
																		<c:if test="${listOrders.item.type == 5}">
																			<img alt="Bebida" src="/amigooo/assets/img/sale.png" style="width: 80px; height: 80px;">
																		</c:if>
																		<c:if test="${listOrders.item.type == 6}">
																			<img alt="Bebida" src="/amigooo/assets/img/other.png" style="width: 80px; height: 80px;">
																		</c:if>
																	</td>
																	<td style="padding-left: 5px;">
																		<table>
																			<tr>
																				<td style="width: 150px !important;"><strong>Cliente:</strong></td>
																				<td>
																					<img style='float:left;width:30px;height:30px;cursor: pointer;' class='user-popover order-user-img img-rounded' alt="${listOrders.user.email}" mail="${listOrders.user.email}" data-toggle="popover" data-placement="bottom" data-original-title="${listOrders.user.name}"/>
																				</td>
																			</tr>
																			<tr>
																				<td><strong>Código do pedido:</strong></td>
																				<td><span><b>${listOrders.order.id}</b></span></td>
																			</tr>
																			<tr>
																				<td><strong>Código do item:</strong></td>
																				<td><span><b>${listOrders.item.code}</b></span></td>
																			</tr>
																			<tr>
																				<td><strong>Descrição:</strong></td>
																				<td><span><b>${listOrders.item.description}</b></span></td>
																			</tr>
																			<tr>
																				<td><strong>Quantidade:</strong></td>
																				<td><span class="label label-info">${listOrders.order.quantity}</span></td>
																			</tr>
																			<tr>
																				<td colspan="2">
										             								<p>
							              												<a class="btn btn-danger btn-small" href="javascript:changeStatus(${listOrders.order.id},3)">
							              													<i class="icon-remove"></i> Cancelar pedido
							              												</a>
							              												<c:if test="${listOrders.order.status == 1}">
								              												<a class="btn btn-small btn-primary" href="javascript:changeStatus(${listOrders.order.id},2)">
								              													<i class="icon-fire"></i> Preparar pedido
								              												</a>
							              												</c:if>
							              												<c:if test="${listOrders.order.status == 2}">
								              												<a class="btn btn-small btn-primary disabled">
								              													<i class="icon-fire"></i> Em preparo
								              												</a>
							              												</c:if>
							              												<a class="btn btn-small btn-success" href="javascript:changeStatus(${listOrders.order.id},0)">
							              													<i class="icon-thumbs-up"></i> Entregar pedido
							              												</a>
							            											</p>
																				</td>
																			</tr>
																		</table>
																	</td>
																</tr>
															</table>
            											</div>
		           					            	</div>
												</c:forEach>
							      		</c:when>
							      		<c:when test="${orders == null}">
							      			<h3>Nenhum pedido realizado</h3>
							      		</c:when>
						      		</c:choose>
								</div>
							</div>
						</fieldset>
					</div>
				</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="/amigooo/assets/js/jquery.js"></script>
<script type="text/javascript" src="/amigooo/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="/amigooo/assets/js/md5.js"></script>
<script type="text/javascript" src="/amigooo/assets/js/start/script.js"></script>
<script type="text/javascript">
	${error}
	${result}
	$("document").ready(function(){
		setTimeout(function(){window.location.href='panel'},10000);
		
		var i = 0;
		$(".active-user-table").each(function(x,y){
			i++;
			$(".badge-active-user").html(i);
		});
		
		i = 0;
		$(".access-user-table").each(function(x,y){
			i++;
			$(".badge-access-user").html(i);
		});
	});
</script>
</html>